<template>
  <div class="container">
    <div class="nav">
      <div class="image" @mouseenter="showInfo" @mouseleave="closeInfo">
        <img src="../../assets/image/teacher.jpeg" />
      </div>
      <ul class="nav_item">
        <li><a href="" @click="go_class">查看班级</a></li>
        <li><a href="" @click="go_change">修改密码</a></li>
        <li><a href="" @click="go_login">退出登录</a></li>
        <li><a href="javascript:void(0)" class="last"></a></li>
      </ul>
      <div class="info" v-show="info">
        <span>姓名：{{ userName }}</span
        ><span>性别：{{ sex }}</span>
        <div class="birthday">年龄：{{ birthday }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../api/index";
export default {
  // name: "sidetea",
  data() {
    return {
      userName: "",
      sex: "",
      info: false,
      birthday: -1,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    showInfo() {
      this.info = true;
    },
    closeInfo() {
      this.info = false;
    },
    go_class() {
      this.$router.push("/teaHome/checkClass").catch((err) => err);
    },
    go_change() {
      this.$router.push("/teaHome/modpsw").catch((err) => err);
    },
    go_login() {
      if (confirm("确认退出登录？")) this.$router.push("/start/login");
      else return;
    },
    initData() {
      request({
        method: "post",
        url: "/user/person_information",
        data: {
          id:
            this.$store.state.login_id == ""
              ? sessionStorage.getItem("id")
              : this.$store.state.login_id,
        },
      })
        .then((res) => {
          if (res.data.message == "success") {
            this.userName = res.data.name;
            this.sex = res.data.sex == "0" ? "男" : "女";
            let birthdayInfo = res.data.birthday.split("-");
            let date = new Date();
            if (date.getMonth() + 1 < birthdayInfo[1])
              this.birthday =
                date.getFullYear() - parseInt(birthdayInfo[0]) - 1 + "岁";
            else
              this.birthday =
                date.getFullYear() - parseInt(birthdayInfo[0]) + "岁";
          } else {
            this.userName = "error";
            this.sex = "error";
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}

.container {
  float: left;
  width: 255px;
  height: 934px;
}

.container .nav {
  position: fixed;
  width: 250px;
  height: 934px;
  background-color: hsla(0, 0%, 12%, 0.918);
}

.container .nav .image {
  width: 140px;
  height: 140px;
  margin: 18px 50px 2px;
  border-radius: 50%;
  overflow: hidden;
}

.container .nav .image img {
  width: 100%;
  min-height: 100%;
}

.container .nav .nav_item {
  height: 760px;
  /* background-color: #0fa1e0; */
}

.container .nav .nav_item li {
  height: 150px;
  /* background-color: red; */
}
.container .nav .nav_item a {
  display: block;
  height: 150px;
  width: 250px;
  padding-left: 60px;
  background-color: #1f1f1f;
  text-decoration: none;
  color: #fff;
  font-size: 27px;
  line-height: 145px;
}

.nav .nav_item a:hover {
  background-color: #0fa1e0;
}

.container .nav .nav_item .last:hover {
  background-color: #1f1f1f;
}
.container .nav .info {
  position: absolute;
  top: 3px;
  left: 100px;
  width: fit-content;
  height: auto;
  background-color: #c8c8c9;
  border-radius: 10px;
}

.container .nav .info span {
  display: block;
  float: left;
  line-height: 60px;
  padding-left: 5px;
  padding-right: 5px;
}
.person_page .nav .info .birthday {
  padding-left: 5px;
}
</style>
